<template>
	<div>
		<el-form :inline="true" style="text-align: left;" :model="form" class="demo-form-inline">
			<el-form-item label="">
				<el-select v-model="form.id" placeholder="请选择员工">
					<el-option v-for="(item,index) in tableData1" :key="index" :label="item.attendeeName"
						:value="item.attendeeId">
						{{item.attendeeName}}
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="on()">查询</el-button>
				<el-button type="danger" @click="close()">重置</el-button>
				<el-button type="success" @click="dialogFormVisible = true">添加活动</el-button>

			</el-form-item>
		</el-form>
		<el-table :data="tableData" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column fixed label="ID" prop="id" sortable width="100"></el-table-column>
			<el-table-column label="员工姓名" prop="attendeeName" sortable width="100"></el-table-column>
			<el-table-column label="项目内容" prop="trainingContent" sortable width="100"></el-table-column>
			<el-table-column label="项目时间" prop="trainingTime" sortable width="100"></el-table-column>
			<el-table-column label="花费" prop="trainingCost" sortable width="100"></el-table-column>
			<el-table-column label="状态" prop="status" sortable width="100" :formatter="typeFormatter">
			</el-table-column>
			<el-table-column label="操作时间" prop="time" sortable width="100"></el-table-column>
			<el-table-column label="操作人" prop="pname" sortable width="100"></el-table-column>
			<el-table-column label="操作" prop="pname" sortable width="100">
				<template slot-scope="scope">
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination :current-page="pageInfo.currentPage" :page-size="pageInfo.pageSize" :page-sizes="[3, 5, 10, 50]"
			:total="pageInfo.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
			@current-change="handleCurrentChange">
		</el-pagination>
		<el-dialog :visible.sync="dialogFormVisible" title="添加活动">
			<el-form ref="form1" :model="form1" :rules="formRule">
				<el-form-item :label-width="formLabelWidth" style="text-align: left;" label="员工" prop="id">
					<el-select v-model="form1.id" placeholder="请选择员工">
						<el-option v-for="(item,index) in tableData1" :key="index" :label="item.attendeeName"
							:value="item.attendeeId">
							{{item.attendeeName}}
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label-width="formLabelWidth" label="项目内容" prop="base">
					<el-input type="textarea" v-model="form1.base1" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item style="text-align: left;" :label-width="formLabelWidth" label="日期">
					<el-date-picker v-model="form1.date" align="right" type="date" placeholder="选择日期"
						:picker-options="pickerOptions">
					</el-date-picker>
				</el-form-item>
				<el-form-item :label-width="formLabelWidth" label="花费" prop="bonus">
					<el-input v-model="form1.bonus"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="send('form1')">确 定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			var Lbase = (rule, value, callback) => {
				//var nu = /^\d{1,}$/;
				if (value === '') {
					callback(new Error('请输入内容'));
				} else if (value.length > 1000) {
					callback(new Error('内容过长!'));
				} else {
					callback();
				}
			};
			var Lbonus = (rule, value, callback) => {
				var nu = /^\d{1,}$/;
				if (value === '') {
					callback(new Error('请输入绩效奖金'));
				} else if (value.length > 8) {
					callback(new Error('奖金过高!'));
				} else if (!nu.test(value)) {
					callback(new Error('请输入正确的奖金!'));
				} else {
					callback();
				}
			};
			var Lid = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请选择员工'));
				} else {
					callback();
				}
			};
			var Ldate = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请选择日期'));
				} else {
					callback();
				}
			};
			return {
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				form: {
					id: "",
					pageNum: 1,
					pageSize: 3,
				},

				form1: {
					id: "",
					base1: "",
					bonus: "",
					date: ""
				},
				dialogFormVisible: false,
				formLabelWidth: "70px",
				dialogVisible: false,
				tableData: [],
				tableData1: [],
				len: "",
				name: "",
				pageInfo: {
					total: 10,
					currentPage: 1,
					pageNum: 1,
					pageSize: 10
				},
				formRule: {
					id: [{
						validator: Lid,
						trigger: 'blur'
					}],
					base1: [{
						validator: Lbase,
						trigger: 'blur'
					}],
					bonus: [{
						validator: Lbonus,
						trigger: 'blur'
					}],
					date: [{
						validator: Ldate,
						trigger: 'blur'
					}]
				},
			}
		},
		mounted() {
			this.findArtList(1, this.pageInfo.pageSize);
		},
		methods: {
			handleDelete(index, row) {
				var id = row.id;
				this.$confirm('您确定要删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.get("/finance/delOne/"+id).then(res => {
						console.log(res.data)
						if(res.data.code == 200){
						this.$message({
							message: '删除成功',
							type: 'success'
						})
						}else{
							this.$message({
								message: '删除失败',
								type: 'danger'
							})
						}
						this.findArtList(this.pageInfo.pageNum, this.pageInfo.pageSize);
					})
				})
			},
			send(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$http.post("/finance/insertBase", this.form1).then(res => {
							if (res.data.code == "200") {
								this.$message({
									message: '添加成功',
									type: 'success'
								});
								this.dialogFormVisible = false
								this.findArtList(this.pageInfo.pageNum, this.pageInfo.pageSize);
								this.form1.id = "";
								this.form1.base = "";
								this.form1.bonus = "";
								this.form1.date = ""
							} else {
								this.$message({
									message: '添加失败',
									type: 'error'
								});
							}
						})
					} else {
						this.$message({
							message: '请更改错误',
							type: 'error'
						})
						return false;
					}
				});
			},
			typeFormatter: function(row, column) {
				console.log(column)
				return row.status == 0 ?
					"未开始" :
					row.status == 1 ?
					"进行中" :
					"已结束";
			},
			on() {
				this.form.pageNum = this.pageInfo.pageNum;
				this.form.pageSize = this.pageInfo.pageSize;
				if (this.form.id == "") {
					this.$message({
						message: '请选择员工',
						type: 'error'
					});
				} else {
					this.$http.post("/finance/mixSel/" + this.form.pageNum + "/" + this.form.pageSize + "/" + this.form.id)
						.then(res => {
							if (res.data.code == "200") {
								this.tableData = res.data.data;
								this.tableData1 = res.data.dataa;
								this.total = res.data.total;
								this.pageInfo.total = res.data.total;
							}
						})
				}
			},
			close() {
				this.form.id = "";
				this.findArtList(this.pageInfo.pageNum, this.pageInfo.pageSize);
			},
			handleEdit(index, row) {
				var rowid = row.id
				var rowstatus = row.status
				this.$http.get("/finance/addTrain", {
					params: {
						rowid,
						rowstatus
					}
				}).then(res => {
					if (res.data != "0") {
						row.status = res.data
					} else {
						this.$message({
							message: '服务器异常',
							type: 'error'
						});
					}
				}).catch((err) => {
					this.$message({
						message: '服务器异常' + err,
						type: 'error'
					});
				});
			},
			findArtList(page, limit) {
				var that = this;
				that.$http.post("/finance/addTrain/" + page + "/" + limit).then(function(res) {
					if (res.data.code != "500") {
						that.tableData = res.data.data;
						that.tableData1 = res.data.dataa;
						that.total = res.data.total;
						that.pageInfo.total = res.data.total;
					}
				})
			},

			handleSizeChange(val) {
				this.pageInfo.pageSize = val;
				this.findArtList(this.pageInfo.pageNum, this.pageInfo.pageSize);
			},
			handleCurrentChange(val) {
				this.pageInfo.pageNum = val;
				this.findArtList(this.pageInfo.pageNum, this.pageInfo.pageSize);
			}
		}
	}
</script>
<style>
	.w {
		text-align: left;
	}
</style>
